<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="成品物料">
              <a-select style="width:100%" v-model="materid" option-label-prop="label" allowClear showSearch
                        :filterOption="filterOption">
                <a-select-option v-for="d in instrlist" :value="d.materielCode" :label="d.productName">
                  {{ d.productName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="生产数量">
              <a-input placeholder="请输入生产数量" v-model="pronum"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="atp状态">
              <a-input placeholder="请输入atp状态" v-model="atpstatus" readOnly></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="最大生产数">
              <a-input placeholder="请输入最大生产数" v-model="maxnum" readOnly></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="区域编码">
              <a-select v-model:value="areaCode" placeholder="请选择区域" @change="getArea">
                <a-select-option v-for="(item, index) in array" :value="item.areaCode" :key="index">
                  {{ item.areaName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="位置编码">
              <a-select v-model:value="locationCode" placeholder="请选择位置">
                <a-select-option v-for="(item, index) in array2" :value="item.locationCode" :key="index">
                  {{ item.locationCode }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="MyAtpCount" icon="search">计算</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
      <!--<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
      <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      <!--</div>-->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :pagination="ipagination"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :scroll="{ x:true}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="productCode" slot-scope="text, record">
          <a @click="showMaterList(text)">{{ text }}</a>
        </span>

        <span slot="action" slot-scope="text, record">
          <!--<a @click="handleDetail(record)">查看</a>-->
          <!--<a @click="handleEdit(record)">编辑</a>-->

          <!--<a-divider type="vertical" />-->
          <!--<a-dropdown>-->
          <!--<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
          <!--<a-menu slot="overlay">-->
          <!--<a-menu-item>-->
          <!--<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
          <!--<a>删除</a>-->
          <!--</a-popconfirm>-->
          <!--</a-menu-item>-->
          <!--</a-menu>-->
          <!--</a-dropdown>-->
        </span>

      </a-table>
    </div>
  </a-card>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import '@/assets/less/TableExpand.less'
import JDate from '@/components/jeecg/JDate.vue'
import StorageMaterList from './StorageMaterList'

export default {
  name: 'MaterUseReportList',
  mixins: [JeecgListMixin],
  components: {
    JDate,
    StorageMaterList
  },
  data() {
    return {
      instrlist: {},
      materid: '',
      areaCode: '',
      locationCode: '',
      pronum: '1',
      maxnum: '',
      atpstatus: '',
      showmodal: false,
      description: 'atp计算',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '料号',
          align: 'center',
          dataIndex: 'materielCode'
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materielName'
        },
        {
          title: '所需数量',
          align: 'center',
          dataIndex: 'frontQuantity'
        },
        {
          title: '库存数量',
          align: 'center',
          dataIndex: 'positionNum'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'spot'
        }
      ],
      url: {
        list: '/storage/reportapi/atpCount',
        exportXlsUrl: '/storage/reportapi/exportXls',
        instrlist: '/chiefdata/mesChiefdataMateriel/getCpList'
      },
      dictOptions: {},
      array: [],
      quyuId: '',
      array2: []
    }
  },
  computed: {},
  mounted() {
    this.$http.get('storage/mesWarehouseArea/list', {
      params: {
        pageNo: 1,
        pageSize: 1000
      }
    }).then(res => {
      if (res.success) {
        this.array = res.result.records
        // this.quyuId = this.array[0].id
        // this.areaCode = this.array[0].areaCode
        this.getArea()
      } else {
        this.$message.error(res.message)
      }
    })
  },
  methods: {
    initDictConfig() {
      let url = this.url.instrlist
      var data = {}
      getAction(url, data).then((res) => {
        if (res.success) {
          this.instrlist = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    MyAtpCount() {
      //dataSource
      console.log(this.materid)
      console.log(this.pronum)
      if (this.materid == '') {
        this.$message.error('请选择成品')
        return false
      }
      if (this.pronum == '') {
        this.$message.error('请输入生产数量')
        return false
      }
      let url = this.url.list
      let data = {
        mater:this.materid,
        num:this.pronum,
        areaCode:this.areaCode,
        locationCode:this.locationCode,
      }
      getAction(url, data).then((res) => {
        if (res.success) {
          let resp = res.result
          console.log(resp)
          this.dataSource = resp.retlist
          this.maxnum = resp.maxnum
          this.atpstatus = resp.flag
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getArea() {
      this.array.forEach(item => {
        if (item.areaCode === this.areaCode) {
          this.quyuId = item.id
        }
      })
      this.array2 = []
      this.locationCode = ''
      this.$http.get('storage/mesWarehouseArea/queryMesWarehouseAreaLocationByMainId', {
        params: {
          id: this.quyuId
        }
      }).then(res => {
        if (res.success) {
          this.array2 = res.result
          this.locationCode = this.array2[0].locationCode
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
